<template>
    <app-layout>
	    <view class="app-advance" :style="{paddingTop: timeBool ? '80rpx': '188rpx' }" v-if="timeList.length > 0">
		    <view class="scroll">
			    <app-scroll :timeList="timeList" @click="activeIndex"></app-scroll>
		    </view>
		    <view class="text-time" v-if="!timeBool">
			    <app-text-time @click="setTime" :html="html" :item="timeList[listIndex]"></app-text-time>
		    </view>
		    <view class="app-next-time dir-left-nowrap main-center cross-center" v-if="timeBool">
			   <image class="app-icon" src="/static/image/icon/empty.png"></image>
			    <view>
				    <text class="app-title">今天场次已无更多场次</text>
				    <text class="app-next dir-top-nowrap">
					    下一场将于
					    <text class="app-time">{{next_miaosha_date_time}}</text>
					    开始
				    </text>
			    </view>
		    </view>
		    <view class="product-list">
			    <app-product-list sign="miaosha" :empty="tabbarbool" :botHeight="BotHeight" :list="goodsList" :status="timeList[listIndex].status"></app-product-list>
		    </view>
	    </view>
	    <view class="empty-time dir-top-nowrap cross-center" v-if="timeList.length === 0 && !loadding">
		    <image src="../image/empty.png"></image>
		    <text>暂无秒杀商品</text>
		    <button @click="router_go">返回首页</button>
	    </view>
    </app-layout>
</template>

<script>
    import { mapState, mapGetters } from 'vuex';
    import AppScroll from '../components/app-scroll.vue';
	import appTextTime from '../components/app-text-time.vue';
	import appProductList from '../components/app-product-list.vue';
	
    export default {
        name: 'advance',
	    data() {
            return {
                timeList: [],
                listIndex: 0,
	            goodsList: [],
	            timeBool: false,
                next_miaosha_date_time: '',
	            page: 1,
                over: false,
                open_time: null,
	            type: null,
                currentRoute: this.$platDiff.route(),
                tabbarbool: false,
                html: '',
                time: -1,
                loadding: true,
            }
	    },
	    computed: {
            ...mapState({
                tabBarNavs: state => state.mallConfig.navbar.navs,
            }),
            ...mapGetters('iPhoneX', {
                BotHeight: 'getBotHeight',
            }),
	    },
	    onShow() {
            this.request({
	            url: this.$api.miaosha.time_list,
	            data: {},
            }).then(response => {
                this.timeList = response.list;
                this.next_miaosha_date_time = response.next_miaosha_date_time;
                if (response.is_estimate === 1) {
                    this.timeList.push({
                        label: "预告",
                        type: 2,
                        open_time: 0,
                        status: 0,
                    });
                }
                this.loadding = false;
                let active = false;
                this.timeList.map((item, index) => {
                    if (item.status === 1) {
                        this.listIndex = index;
                        this.setGetTime(this.timeList[this.listIndex].date_time);
                        active = true;
                        this.open_time = item.open_time;
                        this.type = 1;
                        this.request({
	                        url: this.$api.miaosha.goods,
                            data: {
                                open_time: item.open_time,
                                type: 1,
	                            page: this.page,
                            }
                        }).then(response => {
                            this.goodsList = response.list;
                        });
                    }
                });
                if (!active) {
                    this.listIndex = 0;
                    this.open_time = 0;
                    this.type = 0;
                    
                    if (this.timeList.length === 1) {
                        if (response.is_estimate === 1) {
                            this.timeBool = true;
                            this.request({
                                url: this.$api.miaosha.goods,
                                data: {
                                    open_time: this.timeList[0].open_time,
                                    type: 2,
                                    page: this.page,
                                }
                            }).then(response => {
                                this.goodsList = response.list;
                            });
                        } else {
							this.request({
								url: this.$api.miaosha.goods,
								data: {
									open_time: this.timeList[0].open_time,
									type: 1,
									page: this.page,
								}
							}).then(response => {
								this.goodsList = response.list;
							});
                        }
                    } else if (this.timeList.length > 1){
                        this.setGetTime(this.timeList[this.listIndex].date_time);
                        this.open_time = this.timeList[0].open_time;
                        this.type = 1;
                        this.request({
                            url: this.$api.miaosha.goods,
                            data: {
                                open_time: this.timeList[0].open_time,
                                type: 1,
                                page: this.page,
                            }
                        }).then(response => {
                            this.goodsList = response.list;
                        });
                    }
                }
            });
	    },
        onHide() {
            clearInterval(this.time);
        },
        onUnload() {
            clearInterval(this.time);
        },
	    methods: {
            async request({url, data})  {
                const result = await this.$request({
	                url: url,
	                data: data,
                });
                if (result.code === 0) {
                    return result.data;
                }
            },
            activeIndex(index, item) {
                let type = 1;
                this.over = false;
                this.listIndex = index;
                this.page = 1;
                if (item.type === 2) {
                    clearInterval(this.time);
                    type = 2;
                    this.timeBool = true;
                } else {
                    this.setGetTime(this.timeList[this.listIndex].date_time);
                    this.timeBool = false;
                }
                this.open_time = item.open_time;
                this.type = type;
                this.request({
                    url: this.$api.miaosha.goods,
                    data: {
                        open_time: item.open_time,
                        type: type,
                        page: this.page,
                    }
                }).then(response => {
                    this.goodsList = response.list;
                });
            },
            setTime(data) {
                for (let i = 0; i < this.timeList.length; i++) {
                    if (this.timeList[i].open_time === data.open_time) {
                        if (data.status === 1) {
                            this.timeList[i].status = 2;
                        }
                    }
                }
            },
            b() {
                let currentRoute = this.currentRoute;
                for (let i = 0; i < this.tabBarNavs.length; i++) {
                    if(currentRoute.includes(this.tabBarNavs[i].url.split('?')[0])) {
                        return this.tabbarbool = true;
                    }
                }
                return  this.tabbarbool = false;
            },
		    setGetTime(data) {
                clearInterval(this.time);
                let timelog = new Date(data.replace(/-/g, '/'));
                let time = timelog.getTime() - new Date().getTime();
                let day = parseInt((time/1000/60/60/24)%30);
                let hou = parseInt((time/1000/60/60)%24);
                let min = parseInt((time/1000/60)%60);
                let sec = parseInt((time/1000)%60);
                if (day > 0) {
                    this.html = day+"天"+hou+":"+(min<10?"0"+min:min) + ":"+(sec<10?"0"+sec:sec);
                } else {
                    this.html = hou+":"+(min<10?"0"+min:min) + ":"+(sec<10?"0"+sec:sec);
                }
                this.time = setInterval(() =>{
                    let time = timelog.getTime() - new Date().getTime();
                    if (time < 0) {
                        clearInterval(this.time);
                        this.setTime();
                    }
                    let day = parseInt((time/1000/60/60/24)%30);
                    let hou = parseInt((time/1000/60/60)%24);
                    let min = parseInt((time/1000/60)%60);
                    let sec = parseInt((time/1000)%60);
                    if (day > 0) {
                        this.html = day+"天"+hou+":"+(min<10?"0"+min:min) + ":"+(sec<10?"0"+sec:sec);
                    } else {
                        this.html = hou+":"+(min<10?"0"+min:min) + ":"+(sec<10?"0"+sec:sec);
                    }
                },1000);
		    },

			router_go() {
            	uni.reLaunch({
					url: '/pages/index/index'
				})
			}
	    },
	    onShareAppMessage() {
	        return this.$shareAppMessage({
	            path: '/plugins/miaosha/advance/advance',
	            title: this.$children[0].navigationBarTitle,
	        });
	    },
	    components: {
            'app-scroll': AppScroll,
		    'app-text-time': appTextTime,
		    'app-product-list': appProductList,
	    },
        onReachBottom() {
            if (!this.over) {
                this.page+=1;
                this.$request({
                    url: this.$api.miaosha.goods,
                    data: {
                        open_time: this.open_time,
                        type: this.type,
                        page: this.page,
                    }
                }).then(response => {
                    if (response.code === 0) {
                        if (response.data.list.length > 0) {
                            this.goodsList = [...this.goodsList, ...response.data.list];
                        } else {
                            this.over = true;
                        }
                    }
                });
            }
        },
	    watch: {
            tabBarNavs: {
                handler: function() {
                    this.b();
                },
                immediate: true,
            }
	    }
    }
</script>

<style scoped lang="scss">
	.app-advance {
		position: absolute;
		width: #{750rpx};
		height: 100%;
		background-color: #f7f7f7;
	}
	.scroll {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1601;
	}
	.text-time {
		position: fixed;
		top: #{96rpx};
		z-index: 1600;
		background-color:#f7f7f7;
	}
	
	.app-next-time {
		height: #{180rpx};
		background-color: white;
		.app-icon {
			width: #{100rpx};
			height: #{100rpx};
			margin-right: #{40rpx};
		}
		.app-title {
			font-size: #{28rpx};
			color: #353535;
		}
		.app-next {
			font-size: #{28rpx};
			color: #999999;
		}
		.app-time {
			color: #ff4544;
			margin: 0 #{10rpx};
		}
	}
	.empty-time {
		background-color: #ffffff;
		position: absolute;
		width: 100%;
		height: 100%;
		>image {
			width: #{350upx};
			height: #{350upx};
			margin: #{150upx 0 80upx 0};
		}
		>text {
			font-size: #{32upx};
			color: #353535;
			line-height: 1;
		}
		>button {
			padding: 0;
			border: 0;
			border-radius: #{34upx};
			height: #{68upx};
			font-size: #{26upx};
			color: #ffffff;
			text-align: center;
			line-height: #{68upx};
			background-color: #ff4544;
			width: #{240upx};
			margin-top: #{96upx};
		}
	}
</style>